<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../vue.js"></script>
    <style>
        .php{
            color: cornflowerblue;
        }
        .javascript{
            color: gold;
        }
        .golang{
            color: aqua;
        }
        .python{
            color: darkgreen;
        }
    </style>
    <title>计算属性示例代码</title>
</head>
<body>
    <div id="app">
        <p>Web开发框架：</p>
        <ul>
            <li v-for="framework in frameworks" :class="framework.language">
                {{ framework.name }}
            </li>
        </ul>
        <hr>
        框架：<input v-model="newFramework" name="framework"/>
        语言：
        <select v-model="newLanguage">
            <option v-for="language in languages" v-text="language"></option>
        </select>
        <button @click="addFramework">新增框架</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                frameworks:[
                    {'name':'Laravel','language':'php'},
                    {'name':'Vue','language':'javascript'},
                    {'name':'Gin','language':'golang'},
                    {'name':'Flask','language':'python'},
                ],
                languages:[
                    'php','golang','javascript','python'
                ],
                newFramework:'',
                newLanguage:'',
            },
            methods:{
                addFramework(){
                    this.frameworks.push(
                        {'name':this.newFramework,'language':this.newLanguage}
                    );
                    this.frameworks.sort((a,b)=>{
                        if(a.language<b.language){
                            return -1;
                        }else if(a.language>b.language){
                            return 1;
                        }else{
                            return 0;
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>